<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理-注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
</head>

<body>
<div class="x-body">
    <form id="formAdd" class="layui-form">
        <input type="hidden" id="state" name="state" value="1" required lay-verify="required"
               autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>用户账号</label>
            <div class="layui-input-inline">
                <input type="text" id="account" name="account" placeholder="请输入用户账号" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>用户邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" placeholder="请输入用户邮箱" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>用户姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户姓名" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 可用于登录</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>登录密码</label>
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" placeholder="请输入用户密码" required lay-verify="pass"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 6到16个字符</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>确认密码</label>
            <div class="layui-input-inline">
                <input type="password" id="rePassword" required lay-verify="pass" placeholder="请再次输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填 6到16个字符</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>用户生日</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" required lay-verify="required" placeholder="请输入出生年月"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>内网ip</label>
            <div class="layui-input-inline">
                <input type="text" name="i_p" required lay-verify="required" placeholder="请输入内网ip" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red"></span>爱好</label>
            <div class="layui-input-inline">
                <input type="text" name="version" required lay-verify="required" placeholder="请输入爱好" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item openness">
            <label class="layui-form-label"><span class="x-red">*</span>用户性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男性" lay-skin="primary" checked/>
                <input type="radio" name="sex" value="2" title="女性" lay-skin="primary"/>
            </div>
        </div>
        <!--用户手机-->
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red"></span>用户手机</label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" class="layui-input">

            </div>
            <input type="button" class="layui-btn" id="sendMessage" value="发送验证码">
            <div class="layui-form-mid layui-word-aux">可用于登录</div>
        </div>
        <!--验证码-->
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red"></span>验证码</label>
            <div class="layui-input-inline">
                <input type="text" id="inputVerifyCode" name="" class="layui-input">

            </div>
            <div class="layui-form-mid layui-word-aux">可用于验证登录</div>
        </div>
        <div class="layui-form-item">
            <span id="jbPhoneTip" ></span>
        </div>
        <!--注册请求提交-->
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" type="button" lay-filter="register" lay-submit="">注册</button>
        </div>
    </form>

</div>
</body>
</html>
<script src="${ctxPath}/static/manage/layui/layui.js" charset="utf-8"></script>
<script src="${ctxPath}/static/manage/js/x-layui.js" charset="utf-8"></script>
<script src="${ctxPath}/static/manage/js/jquery.js"></script>
<script src="${ctxPath}/static/manage/js/util.js"></script>
<script type="text/javascript">
    layui.use(['form','layer','jquery'], function(){
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var verifyCode;
        var time = 60;
        var timer = null;
        //发送验证码信息请求
        $('#sendMessage').on('click', function(){
            var phoneNumber = $("input[name=phone]").val();
            alert("手机号"+phoneNumber);
            $.ajax({
                url:"/manage/register/sendMessage",
                type:"post",
                data:{
                    phoneNumber:phoneNumber
                },
                dataType:"json",
                success:function(data){
                    verifyCode = data;
                   //定义时间变量。用于倒计时用
                    //定义一个定时器；
                    timer = setInterval(function(){///开启定时器。函数内执行
                        $("#sendMessage").disabled = true;
                        $("#sendMessage").attr("class","layui-btn");
                        $("#sendMessage").val(time+"秒后重新发送");   //点击发生后，按钮的文本内容变成之前定义好的时间值。
                        time--;//时间值自减
                        if(time ==0){     //判断,当时间值小于等于0的时候
                            $("#sendMessage").disabled = false;
                            $("#sendMessage").val("重新发送验证码");
                            clearInterval(timer); //清除定时器
                        }
                    },1000)
                }
            })
        });

        // 监听提交
        form.on('submit(register)', function(){
            var phone = $("#phone").val();
            var password = $("#password").val();
            var rePassword = $("#rePassword").val();
            var inputVerifyCode = $("#inputVerifyCode").val();

            // 校验俩次密码是否一致，校验手机号是否合法
            if(password != rePassword){
                alert("俩次密码不一致，请重新输入");
                return false;
            }
            //校验验证码是否一致
            if(inputVerifyCode != verifyCode){
                alert("验证码错误,请重新确认");
                return false;
            }
            //校验手机号是否合法
            if(!checkMobile(phone)){
                alert("手机号码不合法");
                return false;
            }
            //发送注册用户请求
            $.ajax({
                url:'/manage/register/RegisterUser',
                type:'post',
                data:$("#formAdd").serialize(),
                success:function(result){
                    alert(result);
                    //发送注册成功信息
                    if(result == "处理成功"){
                        var phoneNumber = $("input[name=phone]").val();
                        $.ajax({
                            url:"/manage/register/registerSuccess",
                            type:"post",
                            data:{
                                phoneNumber:phoneNumber
                            },
                            dataType:"json",
                            success:function(data){
                            }
                        })
                        //刷新页面
                        window.parent.location.reload();
                    }
                },
                error:function(result){
                    alert("注册失败-->>"+result);
                    window.parent.location.reload();
                }
            });
        });


    });
</script>